<template>
  <div class="item-passage-record bg-background text-foreground p-4">
    <h2 class="mb-4 text-2xl font-bold">物品通行记录</h2>
    <!-- Search Bar -->
    <div class="bg-card text-card-foreground mb-4 rounded p-4 shadow">
      <!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-5">
        <div>
          <label for="goodsCode" class="block text-sm font-medium">物品编码：</label>
          <input type="text" id="goodsCode" v-model="search.code" placeholder="请输入"
            class="border-input bg-background focus:border-primary focus:ring-primary mt-1 block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-50" />
        </div>
        <div>
          <label for="goodsName" class="block text-sm font-medium">物品名称：</label>
          <input type="text" id="goodsName" v-model="search.name" placeholder="请输入"
            class="border-input bg-background focus:border-primary focus:ring-primary mt-1 block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-50" />
        </div>
        <div>
          <label for="goodsType" class="block text-sm font-medium">物品类型：</label>
          <select id="goodsType" v-model="search.type"
            class="border-input bg-background focus:border-primary focus:ring-primary mt-1 block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-50">
            <option value="">请选择</option>
            <option value="chemical">化学原料</option>
            <option value="food">食品</option>
            <option value="electronics">电子产品</option>
          </select>
        </div>
        <div>
          <label for="passageType" class="block text-sm font-medium">通行类型：</label>
          <select id="passageType" v-model="search.passage_type"
            class="border-input bg-background focus:border-primary focus:ring-primary mt-1 block w-full rounded-md shadow-sm focus:ring focus:ring-opacity-50">
            <option value="">全部</option>
            <option value="in">进</option>
            <option value="out">出</option>
          </select>
        </div>
        <div class="mt-4 flex justify-end space-x-2">
          <button @click="searchGoods" class="btn btn-primary">查询</button>
          <button @click="resetSearch" class="btn btn-secondary">重置</button>
        </div>
      </div> -->
      <query-form :model="search" :formItems="formItems" @search="searchGoods" @reset="resetSearch" />
    </div>

    <!-- Action Buttons -->
    <div class="mb-4 space-x-2">
      <!-- <button @click="openAddDialog" class="btn btn-primary">新增</button>
      <button @click="deleteSelected" class="btn btn-destructive">删除</button>
      <button @click="openImportDialog" class="btn btn-secondary">导入</button> -->
      <!-- <button @click="exportData" class="btn btn-secondary">导出</button> -->
      <el-button @click="exportData" style="width: 75px; height: 30px;">导出</el-button>
    </div>

    <!-- Data Table -->
    <div class="bg-card text-card-foreground my-6 rounded shadow-md">
      <!-- <table class="min-w-full table-auto">
        <thead>
          <tr class="bg-muted text-muted-foreground text-sm leading-normal">
            <th class="px-6 py-3 text-left">
              <input type="checkbox" :checked="selectAll" @change="toggleSelectAll" />
            </th>
            <th class="px-6 py-3 text-left">物品编码</th>
            <th class="px-6 py-3 text-left">物品名称</th>
            <th class="px-6 py-3 text-left">物品类型</th>
            <th class="px-6 py-3 text-left">生产单位</th>
            <th class="px-6 py-3 text-left">通行时间</th>
            <th class="px-6 py-3 text-left">通行类型</th>
            <th class="py-3 px-6 text-left">操作</th>
          </tr>
        </thead>
        <tbody class="text-sm">
          <tr v-for="item in displayedGoodsData" :key="item.id" class="border-border hover:bg-muted/50 border-b">
            <td class="px-6 py-3 text-left">
              <input type="checkbox" :checked="item.selected" @change="toggleItemSelection(item)" />
            </td>
            <td class="px-6 py-3 text-left">{{ item.code }}</td>
            <td class="px-6 py-3 text-left">{{ item.name }}</td>
            <td class="px-6 py-3 text-left">{{ getTypeText(item.type) }}</td>
            <td class="px-6 py-3 text-left">{{ item.producer }}</td>
            <td class="px-6 py-3 text-left">
              {{ formatDateTime(item.passage_time) }}
            </td>
            <td class="px-6 py-3 text-left">
              {{ getPassageTypeText(item.passage_type) }}
            </td>
            <td class="py-3 px-6 text-left">
              <button @click="loadRecordForUpdate(item)" class="text-blue-600 hover:text-blue-900 mr-2">编辑</button>
              <button @click="confirmDelete(item.id)" class="text-red-600 hover:text-red-900">删除</button>
            </td>
          </tr>
        </tbody>
      </table> -->
      <el-table v-loading="loading" :data="displayedGoodsData" style="width: 100%"
        @selection-change="handleSelectionChange" ref="table" align="center" class="data-table"
        :header-cell-style="headerCellStyle" empty-text="暂无数据">
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="ITEM_CODE" label="物品编码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ITEM_NAME" label="物品名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ITEM_TYPE" label="物品类型" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="PRODUCER" label="生产单位" header-align="center" align="center"></el-table-column>
        <el-table-column prop="PASS_TIME" label="通行时间" header-align="center" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.PASS_TIME) }}
          </template>
        </el-table-column>
        <el-table-column prop="PASS_TYPE" label="通行类型" header-align="center" align="center">
          <template #default="scope">
            {{ getPassageTypeText(scope.row.PASS_TYPE) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <!-- <el-button type="primary" size="small" @click="loadRecordForUpdate(scope.row)" link>编辑</el-button> -->
            <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- Pagination -->
    <div
      class="bg-card text-card-foreground border-border flex items-center justify-between border-t px-4 py-3 sm:px-6">
      <!-- <div class="flex items-center">
        <span class="mr-2">每页显示</span>
        <select v-model="pageSize" @change="changePageSize"
          class="rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
          <option :value="10">10</option>
          <option :value="20">20</option>
          <option :value="50">50</option>
        </select>
        <span class="ml-2">条</span>
      </div>
      <div class="flex items-center">
        <button @click="prevPage" :disabled="currentPage === 1"
          class="mr-1 rounded bg-gray-200 px-3 py-1 text-gray-700">
          &lt;
        </button>
        <button v-for="page in displayedPages" :key="page" @click="goToPage(page)" :class="[
          'px-3',
          'py-1',
          'rounded',
          'mr-1',
          currentPage === page
            ? 'bg-blue-500 text-white'
            : 'bg-gray-200 text-gray-700',
        ]">
          {{ page }}
        </button>
        <button @click="nextPage" :disabled="currentPage === totalPages"
          class="ml-1 rounded bg-gray-200 px-3 py-1 text-gray-700">
          &gt;
        </button>
      </div> -->
      <div>
        <p class="text-sm text-muted-foreground">
          一共检索到 <span class="font-medium total-num">{{ totalItems }}</span> 条信息
        </p>
      </div>
      <div class="flex items-center space-x-2">
        <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-secondary btn-sm"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
          上一页
        </button>
        <span class="text-sm text-muted-foreground">
          {{ currentPage }} / {{ totalPages }}
        </span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-secondary btn-sm"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }">
          下一页
        </button>
      </div>
    </div>

    <!-- Add/Edit Dialog -->
    <Teleport to="body">
      <div v-if="isAddDialogOpen"
        class="bg-background/80 fixed inset-0 flex items-center justify-center backdrop-blur-sm">
        <div class="bg-card text-card-foreground w-[500px] rounded-lg p-5 shadow-xl">
          <h3 class="mb-4 text-lg font-bold">
            {{ editingItem ? '编辑物品通行记录' : '新增物品通行记录' }}
          </h3>
          <form @submit.prevent="handleSubmit">
            <div class="mb-4">
              <label for="code" class="block text-sm font-medium text-gray-700">物品编码：</label>
              <input type="text" id="code" v-model="formData.code" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            </div>
            <div class="mb-4">
              <label for="name" class="block text-sm font-medium text-gray-700">物品名称：</label>
              <input type="text" id="name" v-model="formData.name" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            </div>
            <div class="mb-4">
              <label for="type" class="block text-sm font-medium text-gray-700">物品类型：</label>
              <select id="type" v-model="formData.type" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option value="chemical">化学原料</option>
                <option value="food">食品</option>
                <option value="electronics">电子产品</option>
              </select>
            </div>
            <div class="mb-4">
              <label for="producer" class="block text-sm font-medium text-gray-700">生产单位：</label>
              <input type="text" id="producer" v-model="formData.producer" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            </div>
            <div class="mb-4">
              <label for="passage_time" class="block text-sm font-medium text-gray-700">通行时间：</label>
              <input type="datetime-local" id="passage_time" v-model="formData.passage_time" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
            </div>
            <div class="mb-4">
              <label for="passage_type" class="block text-sm font-medium text-gray-700">通行类型：</label>
              <select id="passage_type" v-model="formData.passage_type" required
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                <option value="0">进</option>
                <option value="1">出</option>
              </select>
            </div>
            <div class="flex justify-end space-x-2">
              <button type="button" @click="closeAddDialog"
                class="rounded-md bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
                取消
              </button>
              <button type="submit"
                class="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
                确认
              </button>
            </div>
          </form>
        </div>
      </div>
    </Teleport>

    <!-- 添加导入对话框 -->
    <Teleport to="body">
      <div v-if="isImportDialogOpen"
        class="bg-background/80 fixed inset-0 flex items-center justify-center backdrop-blur-sm">
        <div class="bg-card text-card-foreground w-[500px] rounded-lg p-5 shadow-xl">
          <h3 class="mb-4 text-lg font-bold">导入物品通行记录</h3>
          <input type="file" @change="handleFileUpload" accept=".xlsx, .xls"
            class="mb-4 block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100" />
          <div class="flex justify-end space-x-2">
            <button @click="closeImportDialog"
              class="rounded-md bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
              取消
            </button>
            <button @click="importData"
              class="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
              导入
            </button>
          </div>
        </div>
      </div>
    </Teleport>
    <!-- 查看对话框 -->
    <el-dialog class="dialog-from" v-model="isViewDialogOpen" title="物品通行记录详情" width="900" destroy-on-close
      align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <el-descriptions title="" :column="3">
            <el-descriptions-item label="物品编码：">{{ selectedItem.ITEM_CODE }}</el-descriptions-item>
            <el-descriptions-item label="物品名称：">{{ selectedItem.ITEM_NAME }}</el-descriptions-item>
            <el-descriptions-item label="物品类型：">{{ selectedItem.ITEM_TYPE }}</el-descriptions-item>
            <el-descriptions-item label="生产单位：">{{ selectedItem.PRODUCER }}</el-descriptions-item>
            <el-descriptions-item label="通行时间：">{{ formatDateTime(selectedItem.PASS_TIME) }}</el-descriptions-item>
            <el-descriptions-item label="通行类型：">{{ getPassageTypeText(selectedItem.PASS_TYPE)
              }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addExpert">确认</el-button>
          <el-button @click="closeViewDialog">
            取消
          </el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import axios from 'axios';
import { getCurrentInstance } from 'vue';
import * as XLSX from 'xlsx';

const { proxy } = getCurrentInstance();

const apiBaseUrl = proxy.$currentUrl + '/api/item-passage-records';

const search = ref({
  ITEM_CODE: '',
  ITEM_NAME: '',
  ITEM_TYPE: '',
  PASS_TYPE: '',
});

const goodsData = ref([]);
const selectAll = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const isAddDialogOpen = ref(false);
const isImportDialogOpen = ref(false); // 添加这行
const importFile = ref(null); // 添加这行
const formData = ref({
  code: '',
  name: '',
  type: '',
  producer: '',
  passage_time: '',
  passage_type: '',
});
const editingItem = ref(null);
const totalItems = computed(() => goodsData.value.length)
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))

const displayedPages = computed(() => {
  const range = 2;
  const start = Math.max(1, currentPage.value - range);
  const end = Math.min(totalPages.value, currentPage.value + range);
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
});

const displayedGoodsData = computed(() => {
  return goodsData.value;
});

const fetchGoodsData = async () => {
  try {
    loading.value = true;
    const response = await axios.get(`${apiBaseUrl}/search`, { params: search.value });
    console.log('获取所有记录 - 查询结果:', response.data);
    goodsData.value = response.data;
    // 假设后端返回的数据格式为 { records: [], total: number }
    // if (response.data && Array.isArray(response.data.records)) {
    //   goodsData.value = response.data.records.map((item) => ({
    //     ...item,
    //     selected: false,
    // }));
    loading.value = false;
    // totalItems.value = response.data.total;
    // } else {
    //   // 如果后端直接返回数组，则保持原来的处理方式
    //   goodsData.value = response.data.map((item) => ({
    //     ...item,
    //     selected: false,
    //   }));
    //   totalItems.value = response.data.length;
    // }
  } catch (error) {
    console.error('Error fetching data:', error);
    alert('获取记录失败：' + error.message);
  }
};

const searchGoods = () => {
  currentPage.value = 1;
  fetchGoodsData();
};

const resetSearch = () => {
  search.value = {
    ITEM_CODE: '',
    ITEM_NAME: '',
    ITEM_TYPE: '',
    PASS_TYPE: '',
  };
  currentPage.value = 1;
  fetchGoodsData();
};

const openAddDialog = () => {
  editingItem.value = null;
  formData.value = {
    code: '',
    name: '',
    type: '',
    producer: '',
    passage_time: '',
    passage_type: '',
  };
  isAddDialogOpen.value = true;
};

const closeAddDialog = () => {
  isAddDialogOpen.value = false;
};

const handleSubmit = async () => {
  try {
    let response;
    if (editingItem.value) {
      console.log('更新记录 - 发送数据:', formData.value);
      response = await axios.put(`${apiBaseUrl}/${editingItem.value.id}`, {
        ...formData.value,
        updated_by: 'current_user', // 替换为实际的用户信息
      });
      alert('记录更新成功');
    } else {
      console.log('创建记录 - 发送数据:', formData.value);
      response = await axios.post(apiBaseUrl, {
        ...formData.value,
        created_by: 'current_user', // 替换为实际的用户信息
      });
      alert('记录创建成功');
    }
    console.log('提交记录 - 接收到的响应:', response.data);
    closeAddDialog();
    fetchGoodsData();
  } catch (error) {
    console.error('Error submitting data:', error);
    alert('提交记录失败：' + error.message);
  }
};

const deleteSelected = async () => {
  if (!confirm('确定要删除选中的记录吗？')) return;

  try {
    selectedIds.value = goodsData.value
      .filter((item) => item.selected)
      .map((item) => item.id);
    console.log('删除多条记录 - 记录ID:', selectedIds);
    const responses = await Promise.all(
      selectedIds.map((id) =>
        axios.delete(`${apiBaseUrl}/${id}`, {
          data: { updated_by: 'current_user' }, // 替换为实际的用户信息
        }),
      ),
    );
    console.log(
      '删除多条记录 - 接收到的响应:',
      responses.map((r) => r.data),
    );
    alert('选中记录删除成功');
    fetchGoodsData();
  } catch (error) {
    console.error('Error deleting records:', error);
    alert('删除记录失败：' + error.message);
  }
};

const openImportDialog = () => {
  isImportDialogOpen.value = true;
};

const closeImportDialog = () => {
  isImportDialogOpen.value = false;
  importFile.value = null;
};

const handleFileUpload = (event) => {
  importFile.value = event.target.files[0];
};

const importData = async () => {
  if (!importFile.value) {
    alert('请选择要导入的文件');
    return;
  }

  const reader = new FileReader();
  reader.onload = async (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet);

    try {
      console.log('导入数据 - 发送数据:', jsonData);
      const response = await axios.post(`${apiBaseUrl}/import`, jsonData);
      console.log('导入数据 - 接收到的响应:', response.data);
      alert('数据导入成功');
      closeImportDialog();
      fetchGoodsData();
    } catch (error) {
      console.error('Error importing data:', error);
      alert('导入数据失败：' + error.message);
    }
  };
  reader.readAsArrayBuffer(importFile.value);
};

const exportData = () => {
  const dataToExport = goodsData.value.map((item) => ({
    物品编码: item.ITEM_CODE,
    物品名称: item.ITEM_NAME,
    物品类型: item.ITEM_TYPE,
    生产单位: item.PRODUCER,
    通行时间: formatDateTime(item.PASS_TIME),
    通行类型: getPassageTypeText(item.PASS_TYPE),
  }));

  const worksheet = XLSX.utils.json_to_sheet(dataToExport);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '物品通行记录');

  // 生成二进制字符串作为文件内容
  const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });

  // 将二进制字符串转换为Blob对象
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });

  // 创建下载链接并触发下载
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = '物品通行记录.xlsx';
  link.click();
};

// 辅助函数：将字符串转换为ArrayBuffer
function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

const loadRecordForUpdate = (item) => {
  editingItem.value = item;
  formData.value = { ...item };
  isAddDialogOpen.value = true;
};

const confirmDelete = async (id) => {
  if (confirm('确定要删除这条记录吗？')) {
    try {
      console.log('删除单条记录 - 记录ID:', id);
      const response = await axios.delete(`${apiBaseUrl}/${id}`, {
        data: { updated_by: 'current_user' }, // 替换为实际的用户信息
      });
      console.log('删除单条记录 - 接收到的响应:', response.data);
      alert('记录删除成功');
      fetchGoodsData();
    } catch (error) {
      console.error('Error deleting record:', error);
      alert('删除记录失败：' + error.message);
    }
  }
};

const toggleSelectAll = () => {
  selectAll.value = !selectAll.value;
  goodsData.value.forEach((item) => (item.selected = selectAll.value));
};

const toggleItemSelection = (item) => {
  item.selected = !item.selected;
  updateSelectAllState();
};

const updateSelectAllState = () => {
  selectAll.value =
    goodsData.value.length > 0 &&
    goodsData.value.every((item) => item.selected);
};
const selectedItem = ref(null)
const selectedIds = ref([])
const isViewDialogOpen = ref(false)
const viewDetails = (item) => {
  selectedItem.value = { ...item }
  isViewDialogOpen.value = true
}
const changePageSize = () => {
  currentPage.value = 1;
  fetchGoodsData();
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    // fetchGoodsData();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    // fetchGoodsData();
  }
};

const goToPage = (page) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    fetchGoodsData();
  }
};



const getPassageTypeText = (type) => {
  return type === '0' ? '进' : '出';
};

watch(selectAll, (newValue) => {
  goodsData.value.forEach((item) => (item.selected = newValue));
});
// 添加格式化日期时间的辅助函数
const formatDateTimeForInput = (dateTimeString) => {
  if (!dateTimeString) return ''
  const date = new Date(dateTimeString)
  return date.toISOString().slice(0, 16) // 格式为 "YYYY-MM-DDTHH:mm"
}

const formItems = ref([
  {
    label: '物品编码：',
    model: 'ITEM_CODE',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '物品名称：',
    model: 'ITEM_NAME',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '物品类型：',
    model: 'ITEM_TYPE',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '请选择', value: '' },
      { label: '原材料', value: '原材料' },
      { label: '中间体', value: '中间体' },
      { label: '成品', value: '成品' },
      { label: '生产设备及零部件', value: '生产设备及零部件' },
      { label: '危险化学品', value: '危险化学品' },
      { label: '辅助材料及能源物资', value: '辅助材料及能源物资' },
      { label: '办公用品及生活用品', value: '办公用品及生活用品' },
      { label: '建筑材料及废弃物', value: '建筑材料及废弃物' },
    ],
  },
  {
    label: '通行类型：',
    model: 'PASS_TYPE',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '全部', value: '' },
      { label: '进', value: '0' },
      { label: '出', value: '1' },
    ],
  },
]);
// 表头样式
const headerCellStyle = {
  height: '30px', // 设置表头高度
  lineHeight: '30px', // 设置行高以垂直居中
  backgroundColor: '#f2f2f2', // 可选：设置背景颜色
  // fontSize: '16px', // 可选：设置字体大小
};
const rules = {
  EQUIPMENT_CODE: [
    { required: true, message: '请输入设备编码', trigger: 'blur' },
  ],
  STAFF_CODE: [
    { required: true, message: '请输入人员编码', trigger: 'blur' },
  ],
  STAFF_NAME: [
    { required: true, message: '请输入人员姓名', trigger: 'blur' },
  ],
  STAFF_TYPE: [
    { required: true, message: '请输入人员类型', trigger: 'change' },
  ],
  PASS_TIME: [
    { required: true, message: '请输入通行时间', trigger: 'change' },
  ],
  PASS_TYPE: [
    { required: true, message: '请输入通行类型', trigger: 'change' },
  ],
};
const formRef = ref(null)
const isDialogType = ref('')
const loading = ref(false)
const handleSelectionChange = (selected) => {
  selectedIds.value = selected;
};
// 添加格式化日期时间的函数
const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return ''
  const date = new Date(dateTimeString)
  return date.toLocaleString()
}

onMounted(() => {
  fetchGoodsData();
});
</script>

<style scoped>
.btn {
  @apply rounded-md px-4 py-2 font-medium transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

.btn-destructive {
  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}
</style>
<style lass="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  /* 按钮居中对齐 */
}

.total-num {
  color: #02a7f0;
  font-size: 28px;
}

:deep(.dialog-from.el-dialog) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

:deep(.dialog-from .el-dialog__header) {
  padding: 11px 17px;
  background-color: #f2f2f2;
  font-size: 18px;
}

:deep(.dialog-from .el-dialog__body) {
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 20px;
}

.body-item {}

.box-title {
  margin-bottom: 10px;
}

:deep(.box-color) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #027db4;
  margin-right: 10px;
}

.box-content {
  /* height: 80px; */
}

.row-item {
  height: 80px;
  /* margin-bottom: 20px; */
}

.input-time {
  border-radius: 4px;
  margin-top: 0;
  box-shadow: 0 0 0 1px #dcdfe6;
}

.input-time:hover {
  box-shadow: 0 0 0 1px #c0c4cc;
}

.upload-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}

.upload-demo :deep(.el-upload) {
  width: 100%;
}

.input-upload {
  width: 100%;
}
</style>
